<template>
  <div class="shop">
    <el-button-group>
      <el-button @click="changeStatus(1)">全部</el-button>
      <el-button @click="changeStatus(2)">发券中</el-button>
      <el-button @click="changeStatus(3)">已结束</el-button>
    </el-button-group>

    <div class="search">
      <div class="search_btn">
        <el-input class="input" v-model="form.keywords" placeholder="输入小店名称或账号搜索" clearable></el-input>
        <el-button type="primary" @click="searchvouchlist">搜索</el-button>
      </div>
    </div>

    <el-table
    class="cash_table"
      :data="tableData"
      style="width:100%"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="id" label="ID" ></el-table-column>

      <el-table-column prop="shop_name" label="小店名称"></el-table-column>
      <el-table-column prop="username" label="小店账号"  width="160"></el-table-column>
      <el-table-column prop="name" label="券信息" width='140'></el-table-column>
      <el-table-column prop="vip_price" label="会员价" width='140'></el-table-column>
      <el-table-column prop="red_packet_price" label="返红包数" width='140'></el-table-column>
      <el-table-column label="发券数/购买数" width='140' >
        <template slot-scope="scope">{{scope.row.voucher_quantity}}/{{scope.row.voucher_grant}}</template>
      </el-table-column>
      <el-table-column label="核销数" prop="voucher_use" ></el-table-column>
      <el-table-column label="会员折扣" width = '140' >
         <template slot-scope="scope">
          <p
            v-if="scope.row.discount.discount"
          >{{scope.row.discount.discount}}%/{{scope.row.discount.tlj}}%</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="created_at" width="160" ></el-table-column>
      <el-table-column   label="状态" >
        <template slot-scope="scope">
          <el-switch
            :key="scope.row.id"
            :active-value= '5'
            :inactive-value= "15"
            :value="scope.row.status"
            @change="isUseActivityChange(scope.row.id,$event)"
          ></el-switch>
          <p v-if="scope.row.status== 5">发券中</p>
          <p v-if="scope.row.status== 15">已结束</p>
          <p v-if="scope.row.status== 1">预发布</p>
          <p v-if="scope.row.status== 10">已完成</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="250">
        <template slot-scope="scope">
          <el-button size="mini" @click="openCashDetail(scope.row.id)">详情</el-button>
          <el-button size="mini" type="danger" @click="buyCashDetail(scope.row.id)">购买记录</el-button>
                    <el-button size="mini" type="danger" @click="deleteCash(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.perPage"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>


    <jdialog title="现金详情" :visible.sync='isShowCashDetail' width='800'>
       <el-form class="cash_detail" label-width="140">
         <el-form-item label="券ID:">{{cashDetail.id}}</el-form-item>
         <el-form-item label="券名称:">{{cashDetail.name}}</el-form-item>
         <el-col :span="8"><el-form-item label="零售价:">¥ {{cashDetail.sale_price}}</el-form-item></el-col>
         <el-col :span="8"><el-form-item label="会员价:">¥ {{cashDetail.vip_price}}</el-form-item></el-col>
         <el-col :span="8"><el-form-item label="返红包数:">{{cashDetail.red_packet_price}}</el-form-item></el-col>
         <el-col :span="8"><el-form-item label="券类型:">现金券</el-form-item></el-col>
         <el-col :span="8"><el-form-item label="券状态:">{{cashDetail.status_word}}</el-form-item></el-col>
         <el-form-item label="发券时间:">{{cashDetail.publish_start_time}}</el-form-item>
         <el-form-item label="可用时段:"><span v-for="(item,index) in cashDetail.voucher_available_time" :key="'s'+index">{{item}}</span></el-form-item>
         <el-col :span="8"><el-form-item label="券总数:">{{cashDetail.voucher_quantity}}</el-form-item></el-col>
         <el-col :span="8"> <el-form-item label="已购买:">{{cashDetail.voucher_grant}}</el-form-item></el-col>
         <el-col :span="8"><el-form-item label="已核销:">{{cashDetail.voucher_use}}</el-form-item></el-col>
         <el-form-item label="每人限领数:">{{cashDetail.voucher_per_use}}</el-form-item>
         <el-form-item label="使用说明:"><span v-for="(item,index) in cashDetail.voucher_description" :key="'p'+index">{{item}}</span></el-form-item>
       </el-form>
    </jdialog>
  </div>
</template>

<script>

import { activityCashCouponList,activityDeleteCashCoupon,activityDownCashCoupon,activityCashCouponInfo } from "@/api/managent";
export default {
  data() {
    return {
      form: {
        keywords: "",
        public_status: "",
        page: 1,
        perPage: 15
      },
      total: 0,
      tableData: [],

      isShowCashDetail:false,
      cashDetail:{

      }
    };
  },
  mounted() {
    this.getCashDataList();
  },
  methods: {
     tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    changeStatus(e) {
      if (e === 1) {
        this.form.public_status = "";
      } else if (e === 2) {
        this.form.public_status = "on";
      } else {
        this.form.public_status = "end";
      }

      //重新获取现金券列表
      this.getCashDataList();
    },
    async getCashDataList() {
      var url =
        "keywords=" +
        this.form.keywords +
        "&public_status=" +
        this.form.public_status +
        "&page=" +
        this.form.page;
      let res = await activityCashCouponList(url);
      this.tableData = res.data.data;
      this.total = res.data.total;
      this.perPage = res.data.per_page;
    },
    //根据关键词重新获取小店
    searchvouchlist() {
      this.getCashDataList();
    },
    pageChange(page) {
      this.form.page = page;
      this.getCashDataList();
    },
    isUseActivityChange(id,e){
      if(e === 15){
        this.getActivityDownCashCoupon(id)
      }else{
        this.$message.error('尚不支持上架功能')
      }
    },
    async getActivityDownCashCoupon(id){
          let res = await activityDownCashCoupon({id:id})
          if(res.code === 10000){
            this.$message.success('下架成功')
      
            this.getCashDataList()
          }else{
            this.$message.error(res.message)
          }
    },
    //查看详情
    openCashDetail(id) {
       console.log(id)
       this.getactivityCashCouponInfoData(id)

    },
    //购买
    buyCashDetail(id) {

      this.$router.push({
        path: "./cashbuylist",
        query: { cid: id }
      });
    },
    //删除
    deleteCash(id){
       this.geDeleteCashCouponData(id)
    },
    async geDeleteCashCouponData(cid){
        let res = await activityDeleteCashCoupon({id:cid})
        if(res.code === 10000){
           this.$message.success('删除现金券成功')
           this.getCashDataList()
        }else{
          this.$message.error(res.message)
        }
    },
    //现金券详情
    async getactivityCashCouponInfoData(id){
      let res =  await activityCashCouponInfo('id='+id)
      if(res.code == 10000){
        this.isShowCashDetail = true;
        this.cashDetail = res.data
      }else{
        this.$message.error(res.message)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  position: relative;

  .search {
    float: right;
    .input {
      width: 200px;
    }
  }
  .shop_title {
    font-weight: 700;
  }
   
   .cash_table{
     margin-top: 20px;
   }
  .pagination {
    float: right;
  }
  .cash_detail{
    padding: 30px ;
    width: 700px;
    .col_cash_detail{
      margin-bottom: 20px;
      .title{
        color: #666666;
        float: left;
        text-align: right;
      }
      .content{
        color: #333333;
      }
    }
  }
}
</style>